<template>
    <div class="full-percent">
        <el-scrollbar style="height: 100%;width: 100%;">
            <h3>防御统计</h3>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="检查次数" labelClassName="label">
                    <div class="forbid-select">{{ walletInfo.checkCount }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="硬检查次数" labelClassName="label">
                    <div class="forbid-select">{{ walletInfo.hardCheckCount }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="非法次数" labelClassName="label">
                    <div class="forbid-select">{{ walletInfo.violationCount }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="黑名单命中次数" labelClassName="label">
                    <div class="forbid-select">{{ walletInfo.blackListHitCount }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="黑名单长度" labelClassName="label">
                    <div class="forbid-select">{{ walletInfo.blackListSize }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="白名单命中次数" labelClassName="label">
                    <div class="forbid-select">{{ walletInfo.whiteListHitCount }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="白名单长度" labelClassName="label">
                    <div class="forbid-select">{{ walletInfo.whiteListSize }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="语法错误次数" labelClassName="label">
                    <div class="forbid-select">{{ walletInfo.syntaxErrorCount }}</div>
                </el-descriptions-item>
            </el-descriptions>
            <h3>表访问统计</h3>
            <el-table :data="walletInfo.tables" border header-cell-class-name="el-table-header-cell"
                cell-class-name="el-table-cell" class="e-page">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="name" label="表名" min-width="150" />
                <el-table-column prop="selectCount" label="Select数" min-width="110" />
                <el-table-column prop="selectIntoCount" label="SelectInto数" min-width="140" />
                <el-table-column prop="insertCount" label="Insert数" min-width="110" />
                <el-table-column prop="updateCount" label="Update数" min-width="110" />
                <el-table-column prop="deleteCount" label="Delete数" min-width="110" />
                <el-table-column prop="truncateCount" label="Truncate数" min-width="120" />
                <el-table-column prop="createCount" label="Create数" min-width="110" />
                <el-table-column prop="alterCount" label="Alert数" min-width="110" />
                <el-table-column prop="dropCount" label="Drop数" min-width="110" />
                <el-table-column prop="replaceCount" label="Replace数" min-width="110" />
                <el-table-column prop="deleteDataCount" label="删除行数" min-width="110" />
                <!--      <el-table-column prop="EffectedRowCount" label="删除行分布" min-width="80"/>-->

                <el-table-column prop="updateDataCount" label="更新行数" min-width="220" />

                <el-table-column prop="updateDataCountHistogram" label="更新行分布" min-width="220">
                    <template #default="scope">
                        {{ scope.row.updateDataCountHistogram }}
                    </template>
                </el-table-column>
                <el-table-column prop="fetchRowCount" label="读取行数" min-width="220" />
                <el-table-column prop="fetchRowCountHistogram" label="读取行分布" min-width="220">
                    <template #default="scope">
                        {{ scope.row.fetchRowCountHistogram }}
                    </template>
                </el-table-column>
            </el-table>
            <h3>函数调用统计</h3>
            <el-table :data="walletInfo.functions" border header-cell-class-name="el-table-header-cell"
                cell-class-name="el-table-cell" class="e-page">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="name" label="函数/方法名" min-width="80" />
                <el-table-column prop="invokeCount" label="引用次数" min-width="80" />
            </el-table>
            <h3>SQL防御统计 - 白名单</h3>
            <el-table :data="walletInfo.whiteList" border header-cell-class-name="el-table-header-cell"
                cell-class-name="el-table-cell" class="e-page">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="sql" label="SQL" min-width="320" />
                <el-table-column prop="sample" label="样本" min-width="200" />
                <el-table-column prop="executeCount" label="执行数" min-width="80" />
                <el-table-column prop="executeErrorCount" label="执行出错数" min-width="80" />
                <el-table-column prop="fetchRowCount" label="读取行数" min-width="80" />
                <el-table-column prop="updateCount" label="更新行数" min-width="80" />
            </el-table>
            <h3>SQL防御统计 - 黑名单</h3>
            <el-table :data="walletInfo.blackList" border header-cell-class-name="el-table-header-cell"
                cell-class-name="el-table-cell" class="e-page">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="sql" label="SQL" min-width="80" />
                <el-table-column prop="sample" label="样本" min-width="80" />
                <el-table-column prop="violationMessage" label="violationMessage" min-width="80" />
                <el-table-column prop="executeCount" label="执行数" min-width="80" />
                <el-table-column prop="fetchRowCount" label="读取行数" min-width="80" />
                <el-table-column prop="updateCount" label="更新行数" min-width="80" />
            </el-table>
        </el-scrollbar>
    </div>

</template>
<script setup>
import { useRequest, useUnMounted } from "@usehook"

let walletInfo = $ref({})
let interval = $ref(null)

const getData = () => {
    useRequest({
        url: "/dataSource/druid/wall.json?orderBy=&orderType=asc&page=1&perPageCount=1000000"
    }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            walletInfo = resp.Content
        }
    })
},
    clear = () => {
        if (interval) clearInterval(interval)
        interval = null
    }

onActivated(() => {
    getData()
    clear()
    interval = setInterval(() => {
        getData()
    }, 10000)
})

useUnMounted(() => {
    clear()
})

</script>
<style scoped>
:deep(.label) {
    width: 250px;
}

:deep(.el-descriptions-row th) {
    text-align: right !important;
}

:deep(.el-drawer__body) {
    padding: 0 5px;
}

:deep(h3) {
    margin: 10px 0;
}

:deep(.el-drawer__header) {
    margin-bottom: 20px;
}

:deep(.el-scrollbar__bar.is-vertical) {
    width: 0 !important;
}
</style>